<template>
    <div>
        <el-tabs v-model="activeTab" @tab-click="handleClick">
            <el-tab-pane label="全部订单" name="0"></el-tab-pane>
            <el-tab-pane label="已支付" name="2"></el-tab-pane>
            <el-tab-pane label="未支付" name="1"></el-tab-pane>
            <el-tab-pane label="未评价" name="4"></el-tab-pane>
        </el-tabs>

        <el-card v-for="order in orders" :key="order.id">
            <div class="header">
                <span>订单号：{{ order.id }}</span>
                <span>预订日期：{{ order.payTime }}</span>
            </div>
            <div class="content">
                <div class="left">
                    <p class="hotelName">酒店名：{{ order.hotelName }}</p>
                    <p>酒店地址：{{ order.hotelAddress }}</p>
                    <p>入住日期：{{ order.checkInTime }}</p>
                    <p>房间数：{{ order.count }}</p>
                    <p>入住人：{{ order.guestName }}</p>
                    <p>房价类型：{{ order.hotelRoomType }}</p>
                </div>
                <div class="right">
                    <p :class="{'未支付': order.status === '1', '已支付': order.status === '2', '已取消': order.status === '3', '未评价': order.status === '4'}">{{ statusText(order.status) }}</p>
                    <p>酒店价格：{{ order.totalPrice }}元</p>
                </div>
            </div>
            <div class="footer">
                <el-button type="primary" @click="viewHotelDetail(order.id)">酒店详情</el-button>
                <el-button type="primary" v-if="order.status === 1" @click="goToPay(order)">现在支付</el-button>
                <el-button type="primary" v-if="order.status === 2" @click="cancelBooking(order.id)">取消预订</el-button>
                <el-button type="primary" v-if="order.status === 4" @click="writeReview(order.id)">评论</el-button>
            </div>
        </el-card>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="pagination">
        </el-pagination>
    </div>
</template>

<script >
import axios from "axios";
let gateway = '/order/order';
import cookie from "js-cookie";
export default {
    name: "HotelOrder",
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            total: 0,
            activeTab: '0',
            orders: [
                {
                    id: '1',
                    orderNumber: '123456',
                    payTime: '2023-05-20',
                    hotelName: 'Hotel A',
                    hotelAddress: 'Address A',
                    checkInTime: '2023-05-25',
                    count: '1',
                    guestName: 'John Doe',
                    hotelRoomType: 'Deluxe',
                    status: '1',
                    totalPrice: '100'
                },

                // More orders...
            ]
        }
    },
    methods: {
        init() {
            const params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: this.activeTab,
            }
            axios.post(gateway + '/hotelOrder/queryHotelOrder',params)
                .then(res => {
                    console.log(res.data.records);
                    this.orders = res.data.records;
                })
                .catch(err => {
                    console.log(err);
                })
        },
        handleSizeChange(size) {
            this.currentPage = 1;
            this.pageSize = size;
            this.init();
        }
        ,
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.init();
        }
        ,
        handleClick(tab, event) {
            this.activeTab = tab.name;
            this.init();
        },
        viewHotelDetail(id) {
            //跳转酒店详情
            this.$router.push({
                path: '/hotelDetail',
                query: {
                    hotelId: id
                }
            })
        },
        goToPay(order) {
            let subject = order.hotelRoomType;
            try {
                // 尝试解码字符串，如果解码失败，说明字符串没有被编码过
                subject = decodeURIComponent(subject);
            } catch (e) {
                // 这里什么也不做，只是保持 subject 的原值
            }
            const params = {
                subject: encodeURIComponent(subject),
                orderId: order.id,
                totalPrice: order.totalPrice
            };
            const url = 'http://localhost:9087/alipay/alipay/alipay/pay?'+ 'subject=' +order.hotelRoomType + '&orderId=' + order.id + '&totalPrice=' + order.totalPrice;
            window.location.href = url;
        },
        cancelBooking(id) {
            //取消订单
        },
        writeReview(id) {
            //评论接口
        },
    },
    computed: {
        statusText() {
            return function(status) {
                switch(status) {
                    case 1:
                        return '未支付';
                    case 2:
                        return '已支付';
                    case 3:
                        return '已取消';
                    case 4:
                        return '未评价';
                    default:
                        return '未知状态';
                }
            }
        }
    },
    created() {
        this.init();
    }
}
</script>

<style>
.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; /* 增加的间距，可以根据需要调整 */
}
.content {
    display: flex;
    justify-content: space-between;

}
.left {
    text-align: left;
}

.left p {
    margin-bottom: 10px; /* 增加的间距，可以根据需要调整 */
}
.right {
    text-align: right;
}

.right p {
    margin-bottom: 10px; /* 增加的间距，可以根据需要调整 */
}

.footer {
    text-align: right;
}
.el-card {
    margin: 20px; /* 根据需要调整边距 */
}

.hotelName{
    font-size: 18px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

p{
    font-size: 15px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    margin-top: 30px;
}

.unpaid {
    color: red; /* 未支付状态的颜色 */
}

.paid {
    color: green; /* 已支付状态的颜色 */
}
</style>